<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/html5shiv.js"></script>
    <script src="../js/popper.js"></script>
    <script src="../js/respondjs.js"></script>
    <script src="../js/jquery-3.4.1.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>
<body>
<div class="container">
    <!--
         data-toggle:点击切换modal显示，是给js用的
         modal:是类样式
         modal-dialog：模态框的对话框
         modal-content：模态框的内容
         modal-header：内容的头部
         modal-body：内容的主体
         modal-footer：内容的底部，默认text-right
         data-dismiss:点击让modal不显示，是给js用的
         modal-backdrop：是黑色的蒙层，是js动态添加的div
     -->
    <!-- 触发的按钮 -->
    <a href="" type="button" class="btn btn-primary" data-toggle="modal">点击弹框</a>
<!-- 模态框 -->
<div id="mymodal" class="modal">
    <!-- 对话框 -->
    <div class="modal-dialog">
        <!-- 中的内容 -->
        <div class="modal-content">
            <!-- 内容上 -->
            <div class="modal-header">
                <button type="button" class="btn close" data-dismiss="modal">×</button>
                <h3 class="modal-title">温馨提示</h3>nbf
            </div>
            <!-- 内容中 -->
            <div class="modal-body">
                <p> 我是内容。。。。</p >
            </div>
            <!-- 内容下 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success btn-sm" data-dismiss="modal">Confirm</button>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>
